<template>
    <div class="device-table">
        <div class="title">
            <h2>设备运维{{ titleData.day }}报</h2>
            <div class="device-name">
                <span>设备编号：{{ titleData.deviceCode }}</span>
                <span>设备名称：{{ titleData.deviceName }}</span>
            </div>
            <div class="time">生成报表时间：{{ data.time }}</div>
        </div>
        <h3>一、运行保障</h3>
        <table>
            <thead>
                <tr>
                    <th colspan="2">机构</th>
                    <th>运行时长</th>
                    <th style="width: 250px">占总周期比率</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 3)">
                    <td colspan="2">{{ item.institutionsName }}</td>
                    <td>{{ item.runtimeDuration }}</td>
                    <td>{{ item.percentage }}%</td>
                </tr>
                <tr v-for="(item, index) in tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 2)">
                    <td :rowspan="tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 2).length" v-if="index == 0">小车</td>
                    <td>{{ item.institutionsName }}</td>
                    <td>{{ item.runtimeDuration }}</td>
                    <td>{{ item.percentage }}%</td>
                </tr>
                <tr v-for="(item, index) in tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 1)">
                    <td :rowspan="tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 1).length" v-if="index == 0">起升机构</td>
                    <td>{{ item.institutionsName }}</td>
                    <td>{{ item.runtimeDuration }}</td>
                    <td>{{ item.percentage }}%</td>
                </tr>
            </tbody>
        </table>
        <h3>二、状态监测</h3>
        <h4>1、健康评估</h4>
        <table>
            <thead>
                <tr>
                    <th colspan="2">对象</th>
                    <th style="width: 70px">健康度</th>
                    <th style="width: 100px">较上周期增幅</th>
                    <th style="width: 70px">判断</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 1)">
                    <td :colspan="2" v-if="index === 0">{{ item.institutionsName }}</td>
                    <td>{{ item.health }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
                <tr v-for="(item, index) in tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 2)">
                    <td :rowspan="tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 2).length" v-if="index === 0">起升机构</td>
                    <td>{{ item.institutionsName }}</td>
                    <td>{{ item.health }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
                <tr v-for="(item, index) in tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 3)">
                    <td :rowspan="tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 3).length" v-if="index === 0">易损易耗件</td>
                    <td>{{ item.institutionsName }}</td>
                    <td>{{ item.health }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
            </tbody>
        </table>
        <h4>2、故障分析</h4>
        <table>
            <thead>
                <tr>
                    <th colspan="3">对象</th>
                    <th style="width: 100px">趋势平稳度</th>
                    <th style="width: 100px">较上周期增幅</th>
                    <th style="width: 70px">判断</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 2)[0].equipmentTrendDatas">
                    <td :rowspan="tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 2)[0].equipmentTrendDatas.length" v-if="index === 0" colspan="2">主梁应变</td>
                    <td>{{ item.evaluateObject }}</td>
                    <td>{{ item.trendSmoothness }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
                <tr v-for="(item, index) in tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 3)[0].equipmentTrendDatas">
                    <td :rowspan="tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 3)[0].equipmentTrendDatas.length" v-if="index === 0">主结构倾角</td>
                    <td colspan="2">{{ item.evaluateObject }}</td>
                    <td>{{ item.trendSmoothness }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
                <tr v-for="(item, index) in tableData?.device">
                    <td :rowspan="tableData?.device.length" v-if="index === 0">起升机构</td>
                    <td :rowspan="item.length" v-if="item.title">{{ item.title }}</td>
                    <td>{{ item.evaluateObject }}</td>
                    <td>{{ item.trendSmoothness }}%</td>
                    <td>{{ item.increase }}%</td>
                    <td>{{ item.judgment }}</td>
                </tr>
            </tbody>
        </table>
        <h3>三、基础运维</h3>
        <h4>1、本{{ titleData.day }}计划数：{{ tableData?.secondTotal }}</h4>
        <h4>2、工单数量统计</h4>
        <table>
            <tbody>
                <tr class="pdf-item">
                    <td colspan="3">工单总数</td>
                    <td style="width: 250px">{{ tableData?.workOrderStatisticsModels?.total }}</td>
                </tr>
                <tr class="pdf-item">
                    <td rowspan="4">报修工单</td>
                    <td colspan="2">报修工单总数</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.repairOrder?.total }}</td>
                </tr>
                <tr class="pdf-item">
                    <td colspan="2">已完成工单数</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.repairOrder?.finishd }}</td>
                </tr>
                <tr class="pdf-item">
                    <td rowspan="2">新增工单数</td>
                    <td>人工报修工单</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.repairOrder?.labor }}</td>
                </tr>
                <tr>
                    <td>智能报修工单</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.repairOrder?.aI }}</td>
                </tr>
                <tr>
                    <td rowspan="4">维保工单</td>
                    <td colspan="2">维保工单总数</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.maintainOrder?.total }}</td>
                </tr>
                <tr>
                    <td colspan="2">已完成工单数</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.maintainOrder?.finishd }}</td>
                </tr>
                <tr>
                    <td colspan="2">新增计划维保工单数</td>
                    <td>{{ tableData?.workOrderStatisticsModels?.maintainOrder?.addOrderTotal }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import PdfLoader from "@/utils/utils.js";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import { ref, computed } from "vue";
import { formConfig } from "../config.js";
const props = defineProps({
    formData: {
        type: Object,
        default: () => ({})
    },
    tableData: {
        type: Object,
        default: () => ({})
    }
});
const titleData = computed(() => ({
    day: formConfig.value[3].options.find((item) => item.value === props.formData.day)?.label,
    deviceCode: props.formData.equipmentCode,
    deviceName: formConfig.value[2].options.find((item) => item.value === props.formData.equipmentCode)?.label
}));
const data = ref({
    time: ""
});
const download = () => {
    const pdf = new PdfLoader(document.querySelector(".device-table"), `设备运维${titleData.value.day}报`);
    pdf.getPDF();
    JSZipUtils.getBinaryContent("../设备运维日周月报.docx", function (error, content) {
        if (error) {
            throw error;
        }
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        let doc = new docxtemplater().loadZip(zip);
        doc.setData({
            day: titleData.value.day,
            deviceCode: titleData.value.deviceCode,
            deviceName: titleData.value.deviceName,
            time: data.value.time,
            crane: props.tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 3),
            smallCar: props.tableData.equipmentInstitutionsModels?.filter((item) => item.logotype === 2),
            lifting1Mechanism: props.tableData?.equipmentInstitutionsModels?.filter((item) => item.logotype === 1),
            completeMechanism: props.tableData.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 1),
            lifting2Mechanism: props.tableData.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 2),
            consumableParts: props.tableData?.equipmentHealthAssessmentModels?.filter((item) => item.logotype === 3),
            primaryBeam: props.tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 2)[0].equipmentTrendDatas,
            primaryStructure: props.tableData?.equipmentTrendSmoothModels?.filter((item) => item.logotype === 3)[0].equipmentTrendDatas,
            // lifting3Mechanism: props.tableData?.equipmentTrendSmoothModels?.find((sub) => sub.evaluateObject === "1#主起升机构").equipmentTrendDatas,
            // lifting4Mechanism: props.tableData?.equipmentTrendSmoothModels?.find((sub) => sub.evaluateObject === "2#主起升机构").equipmentTrendDatas,
            // lifting5Mechanism: props.tableData?.equipmentTrendSmoothModels?.find((sub) => sub.evaluateObject === "3#主起升机构").equipmentTrendDatas,
            device: props.tableData?.device,
            planCount: props.tableData?.secondTotal,
            orderTotal: props.tableData.workOrderStatisticsModels?.total,
            repairOrderTotal: props.tableData.workOrderStatisticsModels?.repairOrder?.total,
            repairOrderFinished: props.tableData.workOrderStatisticsModels?.repairOrder?.finishd,
            repairOrderLabor: props.tableData.workOrderStatisticsModels?.repairOrder?.labor,
            repairOrderAI: props.tableData.workOrderStatisticsModels?.repairOrder?.aI,
            maintainOrderTotal: props.tableData.workOrderStatisticsModels?.maintainOrder?.total,
            maintainOrderFinished: props.tableData.workOrderStatisticsModels?.maintainOrder?.finishd,
            maintainOrderAddOrderTotal: props.tableData.workOrderStatisticsModels?.maintainOrder?.addOrderTotal
        });
        doc.render();
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        saveAs(out, `设备运维${titleData.value.day}报.docx`);
    });
};
defineExpose({
    download,
    data
});
</script>

<style lang="scss" scoped>
.device-table {
    padding: 30px 26px;
    width: 794px;
    margin: 0 auto;
    font-family: SimHei;
    line-height: 30px;
    box-sizing: border-box;
    .title {
        text-align: center;
        h2 {
            font-weight: 400;
        }
        .device-name {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
        }
        .time {
            margin-top: 10px;
        }
    }
    h4,
    h3 {
        font-weight: 400;
    }
    h3 {
        margin: 8px 0;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #000;
        td,
        th {
            padding-left: 5px;
            border: 1px solid #000;
            text-align: left;
            font-weight: 400;
        }
    }
}
</style>
